
<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed } from "vue";
import { reactive, ref } from "vue";

// import request from "@/common/utils/request";

const emit = defineEmits(["tagChange:data"]);

const props = defineProps({
    list: {
        type: Array,
        default: () => {
            return []
        }
    },
    // 已选择的标签
    bind_tags: {
        type: Array,
        default: () => {
            return []
        }
    }
})

const dialog = ref(null)

const state = reactive({
    activeKey: 0,
})

const handleTabChange = (key) => {
    console.log(key, 'tab变化');
}

const open = () => {
    // 初始赋值
    selectedList.value = JSON.parse(JSON.stringify(props.bind_tags))
   dialog.value && dialog.value.showModal()
}

const close = () => {
   dialog.value && dialog.value.closeModal()
}

// 已选择标签
const selectedList = ref([])


// 所有选择的标签
const allSelectTags = computed({
    get() {
            return  selectedList.value
    },
    set(item) {
      // 查找是否已经存在
        const findIndex = selectedList.value.findIndex(
          ele => ele.tag_group_id === item.tag_group_id && ele.tag_id === item.tag_id
        );

        if (findIndex !== -1) {
          // 如果存在，则删除
          selectedList.value.splice(findIndex, 1);
        } else {
          // 如果不存在，则添加
          selectedList.value.push(item);
        }
    }
})

// 选择标签
const chooseTag = (item) => {
    console.log(item, '选择标签');
    // 看看有没有重复的选择
    allSelectTags.value = item;
}

// 点击确定
const submit = async () => {
    emit('tagChange', allSelectTags.value)
    close()
 }

defineExpose({
    open,
    close
})

</script>

<template>
    <div>

        <baseModel ref="dialog" :title="'编辑标签'" :zIndex="1100" @submit="submit">
            <template #content>
                <a-tabs tab-position="left" v-model:activeKey="state.activeKey" @change="handleTabChange">
                    <a-tab-pane v-for="(item, index) in props.list" :key="index" :tab="item.name">
                    <a-tag @click="chooseTag({
                        tag_id: tag_item.id,
                        tag_group_id: item.id
                    })"
                    :color="allSelectTags.some(ele => ele.tag_group_id == item.id && ele.tag_id == tag_item.id) ? 'error' : 'default'"
                    v-for="(tag_item) in item.tags" :key="tag_item.id"
                    style="cursor: pointer;"
                    >
                    {{ tag_item.name }}
                </a-tag>
                <!-- :color=" 'error' : 'default'" -->


                <!-- <a-spin style="margin-left: 150px; margin-top: 40px;" v-if="loading" />
                <a-tag @click="chooseTag(tag_item)"
                    :color="selectedList.findIndex(v => (v.name && v.id == tag_item.id) || (!v.name && v.tag_id == tag_item.id)) != -1 ? 'error' : 'default'"
                    class="tag_item" v-for="(tag_item, tag_index) in tagList" :key="tag_index">{{ tag_item.name }}</a-tag>
                <template v-if="!loading">
                    <a-input placeholder="请输入标签" v-if="inputVisible" ref="inputRef" v-model:value="inputValue"
                        type="text" size="small" :style="{ width: '78px', marginTop: '8px' }" @blur="handleInputConfirm"
                        @keyup.enter="handleInputConfirm" />
                    <a-tag v-else style="background: #fff; border-style: dashed; margin-top: 8px;" @click="showInput">
                        <plus-outlined />
                        添加标签
                    </a-tag>
                </template> -->
            </a-tab-pane>
        </a-tabs>
            </template>

        </baseModel>

    </div>
</template>

<style lang="less" scoped>

</style>